<template>
  <div class="footer">
    <div class="my-tabs">
      <div :class="['item', it.act && 'act', it.icon]" v-for="it in tabs" :key="it.txt" @click="toPage(it)">
        {{ it.txt }}
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { Ref, ref } from "vue";
import { useRouter, useRoute } from "vue-router";

const router = useRouter();
const route = useRoute();

const tabs: Ref<Array<MyTabsInf>> = ref([])
    setTimeout(function(){
        tabs.value=[
        { icon: 'home' ,act: true, txt: '首页', path: '/home' },
    { icon: 'trends', act: false, txt: '动态', path: '/video' },
    { icon: 'cart', act: false, txt: '购物车', path: '/cart' },
    { icon: 'double ', act: false, txt: '双11', path: '/shop' },
    { icon: 'me', act: false, txt: '我的', path: '/mine' },
        ].map((it:MyTabsInf)=>{
            it.act = it.path === route.path
            return it
        })
    },200)
// 点击跳转
function toPage(it: MyTabsInf) {
  router.push(it.path);
  tabs.value = tabs.value.map((oo: MyTabsInf) => {
    oo.act = it.path === oo.path;
    return oo;
  });
}
</script>
<style lang="less" scoped>
@import "../style/common.less";

.footer {
  z-index: 999;
  width: 100%;
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;

  // height: 100%;
  .my-tabs {
    display: flex;
    height: 50px;
    background-color: @g01;
    overflow: hidden;
    font-size: 0.65rem;

    >.item {
      flex: 1;

      &::before {
        content: "";
        display: block;
        height: 30px;
        // background-size: 24px;
        background-repeat: no-repeat;
        background-position: center;
      }

      text-align: center;

      color: @g06;

      &.home::before {
        .iconfont();
        content: "\e61d";

        // background-image: url(../../images/shouye-zhihui.png);
      }

      &.trends::before {
        .iconfont();
        content: "\e672";

        .icon {
          font-size: 20px;
        }

        // background-image: url(../../images/shouye-zhihui.png);
      }

      &.cart::before {
        .iconfont();
        content: "\e70c";
        // background-image: url(../../images/shouye-zhihui.png);
      }

      &.double::before {
        .iconfont();
        content: "\e899";
        // background-image: url(../../images/shouye-zhihui.png);
      }

      &.me::before {
        .iconfont();
        content: "\e635";
        // background-image: url(../../images/shouye-zhihui.png);
      }

      &.act {
        color: @b3;

        &.home::before {
          color: @b3;
          // background-image: url(../../images/shouye-zhihui.png);
        }

        &.trends::before {
          color: @g03;
          // background-image: url(../../images/shouye-zhihui.png);
        }

        &.add::before {
          color: @b3;
          // background-image: url(../../images/shouye-zhihui.png);
        }

        &.double::before {
          color: @b3;
          // background-image: url(../../images/shouye-zhihui.png);
        }

        &.me::before {
          color: @b3;
          // background-image: url(../../images/shouye-zhihui.png);
        }
      }
    }
  }
}
</style>
